<!--
 * @Author: zhayang
 * @LastEditors: zhayang 1063975710@qq.com
 * @Date: 2024-06-20 20:29:18
 * @LastEditTime: 2024-06-20 23:32:34
 * @Description: 分段tab
-->
<template>
  <div class="bg-#F4F5F9 rd-4 flex h-32 p-4 text-#6A6B6C">
    <div
      v-for="(item, index) in data"
      :key="index"
      class="flex-1 rd-4 center text-12 transition"
      :class="{
        'bg-#04D1B8 text-#fff': active === index,
        'cursor-pointer': !disabled
      }"
      @click="!disabled && changeMenu(index)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    value: {
      type: Number,
      default: 0
    },
    // 是否禁止点击切换状态
    disabled: Boolean
  },
  data() {
    return {
      active: 0
    }
  },
  watch: {
    value: {
      handler(newValue) {
        this.active = newValue
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    changeMenu(index) {
      this.active = index
      this.$emit('change', this.active)
    }
  }
}
</script>
<style lang="scss" scoped></style>
